<template>
    <div class="my-tag">
      <input
        v-if="isEdit"
        v-focus
        @blur="isEdit = false"
        ref="inp"
        class="input"
        type="text"
        placeholder="输入标签"
        :value="value"
        @keyup.enter="handleEnter"
      />
      <div
        v-else
        class="text"
        @dblclick="handleClick"
      >
        {{ value }}
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'MyTag',
    props: {
      value: {
        type: String
      }
    },
    data () {
      return {
        isEdit: false
      }
    },
    methods: {
      handleClick () {
        // 切换显示状态 （Vue是异步Dom更新）
        this.isEdit = true
        // 立刻获取焦点
        // this.$nextTick(() => {
        //   console.log(this.$refs)
        //   this.$refs.inp.focus()
        // })
      },
      handleEnter (e) {
        this.$emit('input', e.target.value)
        this.isEdit = false
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .my-tag {
    cursor: pointer;
    .input {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 100px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
      &::placeholder {
        color: #666;
      }
    }
  }
  </style>
  
  